/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useState, useCallback, useEffect, useRef } from "react";
import { Modal, Avatar } from "antd";
import { isArray } from "lodash";
import styles from "./index.less";

const KbPreviewImage = React.memo(
  ({ src = "", text = "", type = "normal", children, imgWidth = "" }) => {
    const [visible, setVisible] = useState(false);
    const [imgSrc, setImgSrc] = useState("");
    const [srcList, setSrcList] = useState([]);
    const [title, setTitle] = useState("");
    const start = useRef(0);

    useEffect(
      () => {
        const list = [];
        if (isArray(src)) {
          src.forEach(i => {
            list.push(`${i.pic || i}`.replace("http:", ""));
          });
        }
        setSrcList(list);
      },
      [src]
    );

    const onPreviweClick = () => {
      if (isArray(src)) {
        setImgSrc(src[0].pic || src[0]);
        src[0].title && setTitle(src[0].title);
      } else {
        setImgSrc(src);
      }
      setVisible(true);
    };

    const onNavigationClick = useCallback(
      params => {
        const { length } = srcList;
        if (params === "next") {
          start.current++;
        } else {
          start.current--;
        }

        if (start.current > length - 1) {
          start.current = 0;
        }
        if (start.current < 0) {
          start.current = length - 1;
        }
        setImgSrc(srcList[start.current]);
        src[start.current].title && setTitle(src[start.current].title);
      },
      [srcList, src]
    );

    const onCancel = () => {
      setVisible(false);
      start.current = 0;
    };

    return (
      <>
        <span className={styles.preview} onClick={onPreviweClick}>
          {type === "normal" ? (
            <Avatar
              shape="square"
              size="large"
              src={isArray(src) ? srcList[0] : src}
              onError={() => false}
            >
              {text}
            </Avatar>
          ) : (
            children
          )}
        </span>
        <Modal
          width="auto"
          className={styles.preview_modal}
          centered
          footer={null}
          visible={visible}
          closable={false}
          onCancel={onCancel}
        >
          {title && <div className="title">{title}</div>}
          <div className={styles.main}>
            <img alt="预览" src={imgSrc} style={{ width: imgWidth }} />
            {srcList.length > 0 && (
              <>
                <div className={styles.main_prev} onClick={() => onNavigationClick("prev")} />
                <div className={styles.main_next} onClick={() => onNavigationClick("next")} />
                <div className={styles.main_pagination}>
                  {`${start.current + 1} / ${srcList.length}`}
                </div>
              </>
            )}
          </div>
        </Modal>
      </>
    );
  }
);

export default KbPreviewImage;
